<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
    <link rel="stylesheet" href="./css/login.css" />
  </head>
  <body>
    <div class="loginmain">
      <div class="login-title">
        <span>尼恩年会登录</span>
      </div>

      <div class="login-con">
        <div class="login-user">
          <div class="icon">
            <img src="./images/login/user_icon_copy.png" alt="" />
          </div>
          <input
            id="userName"
            type="text"
            name="usernem"
            placeholder="用户名"
            autocomplete="off"
            value=""
          />
        </div>
        <div class="login-pwd">
          <div class="icon">
            <img src="./images/login/lock_icon_copy.png" alt="" />
          </div>
          <input
            id="userPhone"
            type="text"
            name="phone"
            placeholder="手机号码"
            autocomplete="off"
            value=""
          />
        </div>
        <div class="login-yan">
          <div class="icon">
            <img src="./images/login/key.png" alt="" />
          </div>
          <input
            id="code"
            type="text"
            name="code"
            placeholder="验证码"
            autocomplete="off"
            value=""
          />
          <input id="send" type="button" value="获取验证码" />
        </div>
        <div class="login-btn">
          <input id="submit" type="button" value="登录" />
        </div>
      </div>
    </div>
    <script src="./js/staitcFiled.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
      var isQueryCode = false;
      document.querySelector("#submit").addEventListener("click", function () {
        let userName = document.querySelector("#userName").value;
        let userPhone = document.querySelector("#userPhone").value;
        let code = document.querySelector("#code").value;
        data = { userName, userPhone, code };
        fetch(`http://${baseUrl}:3000/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        })
          .then((res) => res.json())
          .then((res) => {
            if (res.code == 200) {
              window.localStorage.setItem("token", res.token);
              window.location.href = "./danmu.html";
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
      document.querySelector("#send").addEventListener("click", function () {
        if (isQueryCode) return;
        isQueryCode = true;
        let userName = document.querySelector("#userName").value;
        let userPhone = document.querySelector("#userPhone").value;
        data = { userName, userPhone };
        fetch(`http://${baseUrl}:3000/login/code`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        })
          .then((res) => res.json())
          .then((res) => {
            if (res.code === 200) {
              // this.style.borderColor = "rgba(223, 190, 106, 0.3)";
              // this.style.color = "rgba(223, 190, 106, 0.7)";
              let i = 60;
              let countDown = setInterval(() => {
                this.value = i + "s";
                i--;
                if (i < 0) {
                  clearInterval(countDown);
                  this.value = "重新获取";
                  isQueryCode = false;
                }
              }, 1000);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    </script>
  </body>
</html>
